<template>
	<view class="main">
		<view class="select">
			<wd-select-picker label="选择房产" v-model="homeSelect" :columns='homeList'
				@change='handleSearch'></wd-select-picker>
		</view>
		<view class="payCard">
			<wd-card class="card">
				<template #title>
					<view style="color: white;font-size: small;">总共待缴金额为（元）</view>
				</template>
				<view class="content">
					<view class="amount">
						{{Number(amount) != 0 ? amount : '已缴清'}}
					</view>
					<wd-button>一键缴清</wd-button>
				</view>
				<template #footer>
					<view style="color: white;font-size: small;" @click="showTotal()">
						点击查看缴费记录</view>
				</template>
			</wd-card>
		</view>
		<view class="cardList">
			<wd-divider style="margin-bottom: 5px;">待缴项目</wd-divider>
			<view class="cardItem" v-for="(card , index) in cardList" :key="index">
				<wd-card>
					<template #title>
						<view class="title">
							<view class="type">{{card.title}}</view>
							<view class="amount">{{card.amount}}</view>
						</view>
					</template>
					<view class="information" v-for="(item , index) in card.informationList" :key="index">
						<view class="itemLabel">
							{{item.label}}
						</view>
						<view class="itemValue">
							{{item.value}}
						</view>
					</view>
					<template #footer>
						<wd-button size='small' type="info">查看详情</wd-button>
						<wd-button size='small'>点击缴费</wd-button>
					</template>

				</wd-card>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		usePaymentStore
	} from '../../../stores/payment.js'
	const {
		type,
		updateInfo
	} = usePaymentStore()

	let amount = ref('123456');
	let homeSelect = ref('')
	const homeList = ref(
		[{
			value: '翻斗花园一号楼809',
			label: '翻斗花园一号楼809'
		}])

	const cardList = [{
			title: '水电费',
			amount: 12345,
			informationList: [{
					label: '最近缴费时间',
					value: '2024-10-23'
				},
				{
					label: '最迟缴费时间',
					value: '2024-10-24'
				},
				{
					label: '最近缴费时间',
					value: '2024-10-23'
				},
				{
					label: '最近缴费时间',
					value: '2024-10-23'
				}
			]
		},
		{
			title: '水电费',
			amount: 12345,
			informationList: [{
					label: '最近缴费时间',
					value: '2024-10-23'
				},
				{
					label: '最近缴费时间',
					value: '2024-10-23'
				},
				{
					label: '最近缴费时间',
					value: '2024-10-23'
				},
				{
					label: '最近缴费时间',
					value: '2024-10-23'
				}
			]
		},
		{
			title: '水电费',
			amount: 12345,
			informationList: [{
					label: '最近缴费时间',
					value: '2024-10-23'
				},
				{
					label: '最近缴费时间',
					value: '2024-10-23'
				},
				{
					label: '最近缴费时间',
					value: '2024-10-23'
				},
				{
					label: '最近缴费时间',
					value: '2024-10-23'
				}
			]
		},

	]

	const handleSearch = ({
		value
	}) => {
		console.log(value, 'value')
	}

	function handleJump(jumpSrc) {
		uni.navigateTo({
			//保留当前页面，跳转到应用内的某个页面
			url: jumpSrc
		})
	}

	const showTotal = () => {
		updateInfo({
			type: 0
		})
		handleJump('/pages/servers/Payment/Payment');
	}
</script>

<style lang="less">
	.main {
		min-height: 100vh;

		background-color: rgb(238, 238, 238);

		.select {
			background-color: white;
			margin: 5px 0;
		}

		.payCard {

			margin: 2vw;

			.wd-card {
				background: linear-gradient(135deg, blue, lightblue) !important;
				margin: 0 !important;
			}

			.content {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.amount {
					color: white;
					font-weight: 800;
					font-size: xx-large;
				}

				.wd-button.is-primary.is-medium.is-round {
					margin: 0 !important;
				}
			}

		}

		.cardList {
			padding-bottom: 10px;

			.title,
			.information {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.title {
				.type {
					font-weight: bold;
				}

				.amount {
					font-weight: 800;
					font-size: x-large;
				}
			}

			.information {
				padding: 5px;

				.itemLabel {
					color: black;
				}

				.itemValue {
					color: gray;
				}
			}
		}
	}
</style>